<!--
  功能：个人竞技答题页面
  说明：PK答题模式，用户按顺序答题，最后显示答对数量
-->
<template>
	<view class="content bg-blue">
	<view class="header bg-ff" :style="'padding-top:'+$statusBarHeight+'px;'">
		<view class="header-box dis-flex-hsb dis-flex-vc">
			<view class="header-back dis-flex-hv w-60" @click="goBack">
				<i class="gjjd-iconfont icon-xiangzuo font-s20 color-33"></i>
			</view>
			<view class="header-title font-s18 font-wb color-33 text-C">个人竞技</view>
			<view class="header-placeholder w-60"></view>
		</view>
	</view>
		
	<view class="body" :style="'margin-top:'+(50+$statusBarHeight)+'px;'">
	<view v-if="!showResultPage && questions.length === 0" class="loading-state">
		<view class="loading-icon">
			<i class="gjjd-iconfont icon-loading font-s48 color-00b6ff"></i>
		</view>
		<text class="loading-text font-s16 color-99">正在加载题目...</text>
	</view>
	
	<view v-if="!showResultPage && questions.length > 0" class="question-card bg-ff radius-16 shadow-md">
			<view class="question-number font-s16 color-33">
				{{currentQuestionIndex + 1}} / {{questions.length}}
		</view>
		
	<view class="question-type font-s14 color-00b6ff">{{currentQuestion.type === 'judge' ? '判断题' : '单选题'}}</view>
			
		<view class="question-text font-s16 color-33">
			{{currentQuestion.question}}
		</view>
			
		<view class="options-list">
		<view 
			v-for="(option, index) in currentQuestion.options" 
			:key="index"
			class="option-item bg-f8 radius-36"
			:class="{'selected bg-505ef2': selectedAnswer === index, 'correct bg-e8f5e9': showAnswer && index === currentQuestion.answer, 'wrong bg-ffebee': showAnswer && selectedAnswer === index && index !== currentQuestion.answer}"
			@click="selectAnswer(index)"
		>
			<text class="option-text font-s15" :class="selectedAnswer === index ? 'color-ff' : 'color-33'">{{option}}</text>
		</view>
	</view>
		
	<!-- 下一题按钮 -->
	<view class="next-btn-container">
		<view 
			class="next-btn dis-flex-hv w-full bg-00b6ff radius-32" 
			@click="nextQuestion"
		>
			<text class="font-s16 font-wb color-ff">{{isLastQuestion ? '提交' : '下一题'}}</text>
		</view>
	</view>
		</view>
		
		<!-- 结果页面 -->
		<view v-if="showResultPage" class="result-page">
			<view class="result-icon">
				<view class="icon-circle dis-flex-hv bg-f5 radius-full shadow-md">
					<i class="gjjd-iconfont icon-info font-s48 color-99"></i>
				</view>
			</view>
			
		<view class="result-text">
			<text class="font-s20 color-33">本次答对</text>
			<text class="font-s24 font-wb color-red"> {{correctCount}} </text>
			<text class="font-s20 color-33">题</text>
		</view>
		
		<!-- 积分奖励 -->
		<view class="result-points" v-if="pointReward > 0">
			<text class="font-s16 color-66">🎉 获得 </text>
			<text class="font-s18 font-wb color-00b6ff">{{pointReward}}</text>
			<text class="font-s16 color-66"> 积分</text>
		</view>
			
		<view class="finish-btn-container">
			<view class="finish-btn dis-flex-hv w-full bg-4c54d3 radius-32" @click="finishGame">
				<text class="font-s16 font-wb color-ff">结束本局</text>
			</view>
		</view>
		</view>
	</view>
</view>
</template>

<script>
import { getPKQuestions, submitPKResult } from "@/api/competition";
import { useUserStore } from '@/store/user';
import { useCompetitionStore } from '@/store/competition';

export default {
	setup() {
		const userStore = useUserStore()
		const competitionStore = useCompetitionStore()
		return {
			userStore,
			competitionStore
		}
	},
	data() {
		return {
			currentQuestionIndex: 0,
			selectedAnswer: null,
			showAnswer: false,
			correctCount: 0,
			showResultPage: false,
			pointReward: 0,         // 获得的积分奖励
			userAnswers: [],        // 用户答案记录
			questions: []           // 题目列表（从API加载）
		}
	},
	computed: {
		currentQuestion() {
			// 如果题目列表为空或索引超出范围，返回默认对象避免错误
			if (!this.questions || this.questions.length === 0 || !this.questions[this.currentQuestionIndex]) {
				return {
					id: 0,
					type: 'judge',
					question: '加载中...',
					options: []
				};
			}
			return this.questions[this.currentQuestionIndex];
		},
		isLastQuestion() {
			return this.currentQuestionIndex === this.questions.length - 1;
		}
	},
	onLoad(options) {
		if (!this.competitionStore.checkMatchId()) {
			return;
		}
		if (!this.userStore.checkLogin()) {
			return;
		}
		this.loadQuestions();
	},
	methods: {
		goBack() {
			uni.showModal({
			title: '提示',
			content: '确定要退出答题吗？',
			success: (res) => {
					if (res.confirm) {
						uni.navigateBack();
					}
				}
			});
		},
		
		selectAnswer(index) {
			this.selectedAnswer = index;
		},
		
		nextQuestion() {
			if (this.selectedAnswer === null) {
				uni.showToast({
					title: '请先选择答案',
					icon: 'none'
				});
				return;
			}
			
			// 记录用户答案
			this.userAnswers.push({
				questionId: this.currentQuestion.id,
				answer: this.selectedAnswer
			});
			
			if (this.isLastQuestion) {
				// 最后一题，提交答案
				this.submitAnswers();
			} else {
				this.currentQuestionIndex++;
				this.selectedAnswer = null;
				this.showAnswer = false;
			}
		},
		
		showResult() {
			this.showResultPage = true;
		},
		
		finishGame() {
			uni.navigateBack();
		},
		
		/**
		 * 从API加载题目
		 */
		async loadQuestions() {
			uni.showLoading({
				title: '加载题目中...'
			});
			
			try {
			const res = await getPKQuestions({
				matchId: this.competitionStore.currentMatchId,
				userId: this.userStore.userId
			});
			
			// 先关闭加载提示
			uni.hideLoading();
				
				if (res.code === 1 && res.data && res.data.questions) {
					// 格式化题目数据
					this.questions = res.data.questions.map(q => ({
						id: q.id,
						type: q.type,  // judge 或 choice
						question: q.question,
						options: q.options
					}));
					
					// 重置答题状态
					this.currentQuestionIndex = 0;
					this.selectedAnswer = null;
					this.correctCount = 0;
					this.userAnswers = [];
					this.showResultPage = false;
			} else {
				// 显示友好的错误提示弹窗
				const errorMsg = res.msg || res.message || '加载题目失败';
				
				uni.showModal({
						title: '温馨提示',
						content: errorMsg,
						showCancel: false,
						confirmText: '知道了',
						success: () => {
							uni.navigateBack();
						}
					});
				}
			} catch (error) {
				console.error('加载题目失败:', error);
				uni.hideLoading();
				
				uni.showModal({
					title: '温馨提示',
					content: error.message || '网络请求失败，请重试',
					showCancel: false,
					confirmText: '知道了',
					success: () => {
						uni.navigateBack();
					}
				});
			}
		},
		
		/**
		 * 提交答案并显示结果
		 */
		async submitAnswers() {
			uni.showLoading({
				title: '提交中...'
			});
			
			try {
				const res = await submitPKResult({
					userId: this.userStore.userId,
					matchId: this.competitionStore.currentMatchId,
					answers: this.userAnswers
				});
				
				if (res.code === 1 && res.data) {
					this.correctCount = res.data.correctCount || 0;
					this.pointReward = res.data.pointReward || 0;
					this.showResultPage = true;
				} else {
					throw new Error(res.message || '提交失败');
				}
			} catch (error) {
				console.error('提交答案失败:', error);
				uni.showToast({
					title: error.message || '提交失败，请重试',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		}
	}
}
</script>

<style scoped>
.content {
	min-height: 100vh;
	padding-bottom: 30rpx;
}

/* 蓝色渐变背景（无法用全局类实现） */
.bg-blue {
	background: linear-gradient(135deg, #0033ff 0%, #0066ff 50%, #3d8aff 100%);
}

/* ==================== 顶部导航栏 ==================== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

.header-box {
	height: 50px;
	padding: 0 20rpx;
}

.header-title {
	flex: 1;
}

/* ==================== 主体内容 ==================== */
.body {
	padding: 40rpx 20rpx;
}

/* ==================== 加载状态 ==================== */
.loading-state {
	text-align: center;
	padding: 200rpx 0;
}

.loading-icon {
	margin-bottom: 30rpx;
	animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.loading-text {
	opacity: 0.8;
}

/* ==================== 答题卡片 ==================== */
.question-card {
	padding: 40rpx 30rpx;
}

.question-number {
	margin-bottom: 15rpx;
}

.question-type {
	margin-bottom: 20rpx;
}

.question-text {
	margin-bottom: 30rpx;
	line-height: 1.8;
}

/* ==================== 选项列表 ==================== */
.options-list {
	margin-bottom: 40rpx;
}

.option-item {
	padding: 25rpx 20rpx;
	margin-bottom: 15rpx;
	cursor: pointer;
	transition: all 0.3s;
}

.option-item:active {
	transform: scale(0.98);
}

.option-text {
	line-height: 1.6;
}

/* ==================== 下一题按钮 ==================== */
.next-btn-container {
	margin-top: 20rpx;
}

.next-btn {
	height: 90rpx;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 4rpx 12rpx rgba(0, 191, 255, 0.3);
}

.next-btn:active {
	transform: scale(0.98);
	opacity: 0.8;
}

/* ==================== 结果页面 ==================== */
.result-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 40rpx;
	min-height: 600rpx;
}

.result-icon {
	margin-bottom: 60rpx;
}

.icon-circle {
	width: 180rpx;
	height: 180rpx;
}

.result-text {
	margin-bottom: 20rpx;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.result-points {
	text-align: center;
	margin-bottom: 40rpx;
}

.finish-btn-container {
	width: 100%;
	max-width: 350rpx;
}

.finish-btn {
	height: 90rpx;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 4rpx 12rpx rgba(0, 191, 255, 0.3);
}

.finish-btn:active {
	transform: scale(0.98);
	opacity: 0.8;
}
</style>
